<template>
    <el-tooltip effect="light" placement="right" :show-after="100" :hide-after="0" max-width="300">
        <template #content>
            <div class="help-content">
                <h4 class="help-title">基本操作说明：</h4>
                <p>1. 空格 + 鼠标拖动：平移画布</p>
                <p>2. 鼠标滚轮：缩放画布</p>
                <p>3. Delete/Backspace：删除选中对象</p>
                <p>4. ESC：退出当前绘制模式</p>
                <h4 class="help-title">工具说明：</h4>
                <p>- 设备：添加设备图标</p>
                <p>- 矩形/圆形：绘制基础图形</p>
                <p>- 线条：连接设备或图形</p>
                <p>- 文字：添加文本说明</p>
            </div>
        </template>
        <div class="help-button">
            <el-button link>
                <i class="fa fa-question-circle"></i>
            </el-button>
        </div>
    </el-tooltip>
</template>

<style scoped>
.help-content {
    font-size: var(--font-size-small);
    line-height: 1.5;
    color: var(--color-text-regular);
}

.help-title {
    margin: 0 0 var(--gap-small) 0;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-primary);
}

.help-button {
    display: inline-block;
}
</style>